<template>
    <div class="personDep">
        <div class="personDep_top">
            <div class="personDep_item" v-for="item in topList" :key="item">
                <div class="item_left">{{ item.title }}</div>
                <div class="count">
                    <count-to
                        :end="item.count"
                        count-class="count-text"
                        unit-class="unit-class"
                    ></count-to>
                </div>
            </div>
        </div>
        <div class="personDep_cneter">
            <div class="center_left">
                <div class="input">
                    <Input
                        v-model="department_name"
                        placeholder="部门名称"
                        style="width: 2.07rem"
                    />
                </div>
                <div class="select">
                    <Select v-model="status" placeholder="状态">
                        <Option value="">全部</Option>
                        <Option value="有效">有效</Option>
                        <Option value="无效">无效</Option>
                    </Select>
                </div>
                <div class="screen">
                    <img src="../../../assets/images/screen_yc.png" alt="" />
                </div>
            </div>
            <div class="center_right">
                <div class="add">
                    <Button type="primary">新增</Button>
                </div>
                <div class="more">
                    <Dropdown style="margin-left: 20px">
                        <Button type="primary">
                            更多
                            <Icon type="md-arrow-dropdown" />
                        </Button>
                        <Dropdown-menu slot="list">
                            <Dropdown-item>下拉菜单</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                </div>
            </div>
        </div>
        <div class="personDep_bottom">
            <Table :columns="columnsList" border :data="tableList">
                <template slot-scope="{ row, index }" slot="action">
                    <div class="action">
                        <p @click="row">修改</p>
                        <p @click="index">删除</p>
                    </div>

                </template>
            </Table>
            <div class="footer_page">
                <Button type="primary">数据导出</Button>
                <Page :total="100" show-elevator />
            </div>
        </div>
    </div>
</template>
<script>
import CountTo from '_c/count-to'
import { getDepartment, getDepartmentNum } from '@/api/baseData'
export default {
  name: 'personDep',
  components: {
    CountTo
  },
  data () {
    return {
      topList: [
        { title: '总部门数', count: '135' },
        { title: '有效', count: '28' },
        { title: '无效', count: '31' }
      ],
      list: [],
      columnsList: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          width: 150,
          title: '部门名称',
          key: 'depName',
          align: 'center'
        },
        {
          title: '说明',
          key: 'explain',
          align: 'center'
        },
        {
          width: 150,
          title: '状态',
          key: 'status',
          align: 'center'
        },
        {
          width: 150,
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      tableList: [
        {
          depName: '工程部1',
          explain: '安全部直属总集团，共36人1',
          status: '有效1'

        },
        {
          depName: '生产部1',
          explain: '安全部直属总集团，共36人1',
          status: '有效1'
        },
        {
          depName: '仓储部1',
          explain: '安全部直属总集团，共36人1',
          status: '有效1'
        },
        {
          depName: '咨询部1',
          explain: '安全部直属总集团，共36人1',
          status: '有效1'
        }
      ],
      department_name: '',
      status: ''
    }
  },
  mounted () {
    this.handleGetDepartment()
    this.getDepartmentNum()
  },
  methods: {
    getDepartmentNum () {
      getDepartmentNum({
        st: 8,
        startDate: new Date().getFullYear() + '-01-01',
        stopDate: new Date().getFullYear() + '-12-31'
      }).then(res => {
        this.topList[0].count = res.data.one
        this.topList[1].count = res.data.two
        this.topList[2].count = res.data.three
      })
    },
    handleGetDepartment () {
      getDepartment({

      }).then(res => {

      })
    }
  }
}
</script>
<style lang="less" scoped>
.personDep {
    .footer_page{
        display: flex;
        justify-content: space-between;
        margin-top: 26px;
        /deep/.ivu-btn {
            width: 120px;
        }
        /deep/.ivu-page-prev{
            background: #0E1420;
            border: 1px solid #0C1B39;
            .ivu-icon-ios-arrow-back:before{
                content: "上一页";
                padding: 0 19px;
                color: #FFFFFF;
            }
        }
        /deep/.ivu-page-options-elevator{
            input{
                background: #0E1420;
                border: 1px solid #0C1B39;
            }
        }
        /deep/.ivu-page-item{
            background: #0E1420;
            border: 1px solid #0C1B39;
            a{
                color: #FFFFFF;
            }

        }
        /deep/.ivu-page-item-active{
            background: #0078E3;
        }
        /deep/.ivu-page-next{
             background: #0E1420;
            border: 1px solid #0C1B39;
            .ivu-icon-ios-arrow-forward:before{
                content: "下一页";
                padding: 0 19px;
                color: #FFFFFF;
            }
        }
    }
    .personDep_bottom{
        margin-top: 7px;
        .ivu-table-wrapper {
            border-color: #0C1B39;
        }
        /deep/.ivu-table{
            background: #0E1420;
            .ivu-checkbox-inner{
                background-color: #0C1B39;
                border: 1px solid #FFFFFF;
                border-radius:0;
            }
            .action{
                display: flex;
                justify-content: space-around;
                color: #0087F0;
                p{
                    line-height: 1;
                    border-bottom: 1px solid #0087F0;
                    cursor: pointer;
                }
            }
            .ivu-checkbox-checked{
                .ivu-checkbox-inner{
                    background-color: #2d8cf0;
                    border: 1px solid #2d8cf0;
                    border-radius:0;
                }
            }
            &:after,
            &:before {
            background-color: #0C1B39;
            }
            tr,th,td{
                background: #0E1420;
                border-color: #0C1B39;
                // border-right:2px;
            }
            th,td{
                height: 60px;
            }
            .ivu-table-cell{
                color: #fff;
                font-size: 16px;
            }
        }
    }
    .personDep_cneter {
        display: flex;
        justify-content: space-between;
        margin-top: 0.25rem;
        .center_left,
        .center_right {
            display: flex;
        }
        .center_right {
            /deep/.ivu-btn {
                width: 90px;
                font-size: 16px;
                padding: 0;
                height: 34px;
                line-height: 34px;
                vertical-align: 0;
                span {
                    display: block;
                    height: 34px;
                    display: flex;
                    justify-content: center;
                    i {
                        display: block;
                        height: 33px;
                        line-height: 34px;
                        border-left: 1px solid #fff;
                        padding-left: 5px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .center_left {
            .input {
                height: auto;
                /deep/.ivu-input-wrapper {
                    .ivu-input {
                        background: #0e1420;
                        border: 1px solid #132851;
                        border-radius: 0;
                        transition: none;
                    }
                    .ivu-input:focus {
                        border: 1px solid #132851;
                        box-shadow: none;
                    }
                }
            }
            .select {
                margin-left: 6px;
                /deep/.ivu-select {
                    width: 2.07rem;
                    // height: .5rem;
                    background: #0e1420;
                    .ivu-select-selection {
                        background: #0e1420;
                        border-radius: 0;
                        border: 1px solid #132851;
                        box-shadow: none;
                        span {
                            border-right: 1px solid #132851;
                            margin-right: 32px;
                        }
                        .ivu-icon-ios-arrow-down {
                            font-size: 18px;
                        }
                        .ivu-icon-ios-arrow-down::before {
                            content: "\F33D";
                        }
                    }
                }
            }
            .screen {
                width: 0.3rem;
                margin-left: 0.19rem;
                // height: .5rem;
                img {
                    width: 100%;
                    // height: 100%;
                }
            }
        }
    }
    .personDep_top {
        display: flex;
        justify-content: space-around;
        .personDep_item {
            width: 2.97rem;
            height: 1.33rem;
            background: url("../../../assets/images/data_border.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            .item_left,
            .count {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .item_left {
                font-size: 0.22rem;
                font-weight: bold;
                color: #ffffff;
            }
            .count {
                /deep/.count-text {
                    font-size: 0.28rem;
                    font-weight: bold;
                    color: #0087f0;
                }
            }
        }
    }
}
</style>
